<template>
  <!--搜索-->
  <div class="select-box">
    <div class="balance-box">
      <div style="padding-right: 10px">
        <el-icon size="40" color="#5695c0">
          <WalletFilled/>
        </el-icon>
      </div>
      <div>
        <div class="balance-title">套餐余额（条数）</div>
        <div class="balance-num">{{ userIntegral }}</div>
      </div>
    </div>
  </div>

  <!--列表-->
  <div class="list-box">
    <el-table
        :header-cell-style="{ 'backgroundColor': 'rgb(246, 246, 246)'}"
        :data="orderList">
      <el-table-column prop="order_no" label="订单号"></el-table-column>
      <el-table-column prop="status_text" label="状态"></el-table-column>
      <el-table-column prop="total_price" label="总金额"></el-table-column>
      <el-table-column prop="updated_at" label="订单时间"></el-table-column>
    </el-table>
    <!--{{orderList}}-->
  </div>

  <div class="pagination-box">
    <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :total="modelTotal"/>
  </div>

</template>
<script lang="ts" setup>
import {onMounted, ref} from "vue";
import Https from "@/server";

const modelTotal = ref(0);
const userIntegral = ref(0);

interface ORDER_LIST {
  order_no: number;
}

const orderList = ref<ORDER_LIST[]>([]);

// 分页跳转
const handleCurrentChange = (val: number) => {
  console.log(val)
}

const userWallet = ()=>{
  Https.getWebConfig({}).then((res:any) => {
    if (res.code === 0) {
      userIntegral.value = res.data.user_info.options.integral?res.data.user_info.options.integral: "暂无余额"
    }
  })
}

const pageList = ()=>{
  let data = {
    status: 1,
    pageNum: 1,
    shop_type: 2
  }
  Https.getOrderList(data).then((res:any) => {
    if (res.code == 0) {
      orderList.value = res.data.list;
      modelTotal.value = res.data.pagination.total_count;
    }
  })
}

onMounted(()=>{
  userWallet();
  pageList();
})
</script>
<style scoped lang="scss">
.balance-box{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  padding-top: 20px;
}
.balance-title{
  text-align: center;
  font-size: 16px;
  color: var(--text-gray-color);
}

.balance-num{
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto;
  color: var(--text-color);
}


.list-box {
  padding: 40px 20px 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 0 0 14px 14px;
  display: flex;
  flex-wrap: wrap;
  height: 582px;
  overflow-y: auto;
}

//分页
.pagination-box {
  padding: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>